<template>
  <f7-page>
    <f7-navbar>
      <f7-nav-left back-link="返回"></f7-nav-left>
      <f7-nav-title>新的朋友</f7-nav-title>
    </f7-navbar>

    <div class="searchbar searchbar-inline">
      <div class="searchbar-input-wrap searchbar_style" style="height: 35px">
        <input
          type="search"
          placeholder="手机号码"
          @keydown.enter="search"
          v-model="inputSearch"
          style="background-color: #e8e8ea"
        />
        <i class="searchbar-icon" style="font-size: 16px"></i>
        <span class="input-clear-button"></span>
      </div>
      <i style="color: #007aff; font-size: 20px" @click="search">搜索</i>
    </div>

    <div class="content list contacts-list">
      <div class="list-group">
        <ul>
          <!--  -->
          <li
            @click="addpeople(searchUser, false)"
            v-if="searchUser.userName != ''"
          >
            <div class="item-content">
              <div class="item-media">
                <img :src="searchUser.avatar" width="44px" />
              </div>
              <div class="item-inner">
                {{ searchUser.nickName }}
                <div
                  class="item-after"
                  style="margin-right: 10px; color: #007aff"
                >
                  <span>{{ usertitle }}</span>
                </div>
              </div>
            </div>
          </li>
          <!--  -->
          <li class="list-group-title"></li>
          <li
            v-for="item in msglist"
            :key="item.id"
            @click="addpeople(item, true)"
          >
            <div class="item-content">
              <div class="item-media">
                <img :src="item.img" width="44px" />
              </div>
              <div class="item-inner">
                {{ item.title }}
                <div
                  class="item-after"
                  style="margin-right: 10px; color: #007aff"
                >
                  <span>查看</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </f7-page>
</template>
<script>
import { mapState } from "vuex";
import store from "@/store/index.js";
import { selectUserByUserName, getReplyBuddyInfoList } from "@/api/IM/index.js";
export default {
  data() {
    return {
      searchUser: {
        userName: "",
      },
      msglist: [],
      userinfor: {},
      isapply: false,
      inputSearch: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        usrId: store.state.user.userInfo.userId,
        userType: "01",
      },
      total: -1,
    };
  },
  computed: {
    ...mapState({
      user: (store) => store.user.userInfo,
      myRequestInfos: (state) => state.user.myRequestInfos,
    }),
    usertitle() {
      if (this.user.userId == this.userinfor.userId) {
        return "查看";
      } else {
        return "添加";
      }
    },
  },
  created() {
    this.getApplyUser();
  },
  methods: {
    scrollToEnd() {
      if (this.queryParams.total == this.msglist.length) {
        return console.log("到底啦!");
      }
      this.queryParams.pageNum++;
      this.getApplyUser();
      // store.dispatch("getUserList", this.queryParams);
    },
    closepop() {
      this.$f7.popup.close("#addfirend");
    },
    // 查询好友
    search() {
      let obj = {
        requestAccount: this.inputSearch,
        // usrId: this.user.userId,
        usrId: "",
        requestId: "",
      };

      selectUserByUserName(obj).then((item) => {
        if (item.code != 200) {
          return this.$f7.dialog.alert(item.msg, "提示");
        }

        if (item.sysUser == null) {
          return this.$f7.dialog.alert("查无此用户", "提示");
        }

        let keys = Object.keys(this.searchUser);
        keys.forEach((item) => {
          this.searchUser[item] = "";
        });

        item.sysUser.avatar =
          item.sysUser.avatar != ""
            ? "/dev-api" + item.sysUser.avatar
            : require("@/assets/image/author.jpg");

        this.searchUser = item.sysUser;
        this.userinfor = item.sysUser;
      });
    },
    // 获取申请的好友
    getApplyUser() {
      getReplyBuddyInfoList(this.queryParams).then((res) => {
        if (res.rows == null || res.rows == undefined) {
          return;
        }
        res.rows.forEach((item) => {
          item.img =
            item.avatar != ""
              ? "/dev-api" + item.avatar
              : require("@/assets/image/author.jpg");
          item.title = item.nickName;
        });
        this.msglist = res.rows;
        this.total = res.total;
      });
    },
    addpeople(firend, index) {
      let query = {
        requestAccount: firend.userName,
        // usrId: this.userinfor.userId,
        usrId: firend.userId,
        requestId: this.user.userId,
      };
      this.$f7router.navigate("/userinfor", {
        props: {
          query: query,
          isapply: index,
          accountId: firend.id,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.searchbar_style {
  display: inline-block;
  width: calc(99% - 50px) !important;
}

.item-media {
  img {
    width: 44px;
    height: 44px;
    border-radius: 22px;
  }
}
</style>
